<template>
  <div class="panel">
    <div class="panel-item" @click="jumpList(0)">
      <i
        class="panel-item-icon icon active aufontAll h-icon-all-catalogue-o"
      ></i>
      <div class="panel-item-name">招标中心-待办</div>
    </div>
    <div class="panel-vSpace"></div>
    <div class="panel-item" @click="jumpList(1)">
      <i
        class="panel-item-icon icon active aufontAll h-icon-all-catalogue-o"
      ></i>
      <div class="panel-item-name">招标中心-已办</div>
    </div>
    <div class="panel-hSpace"></div>
    <div class="panel-item" @click="jumpList(3)">
      <i
        class="panel-item-icon icon active aufontAll h-icon-all-catalogue-o"
      ></i>
      <div class="panel-item-name">待发货库</div>
    </div>
    <div class="panel-vSpace"></div>
    <div class="panel-item" @click="jumpList(4)">
      <i
        class="panel-item-icon icon active aufontAll h-icon-all-catalogue-o"
      ></i>
      <div class="panel-item-name">发货单据</div>
    </div>
    <div class="panel-hSpace"></div>
    <div class="panel-item" @click="jumpList(5)">
      <i
        class="panel-item-icon icon active aufontAll h-icon-all-catalogue-o"
      ></i>
      <div class="panel-item-name">采购合同</div>
    </div>
  </div>
</template>
<script lang="ts">
import {
  Component,
  Vue,
  Prop,
  Watch,
  Inject,
  Emit,
} from "vue-property-decorator";
import { Progress, Icon, Tooltip } from "@h3/antd-vue";

@Component({
  name: "appZC",
  components: {
    AProgress: Progress,
    AIcon: Icon,
    ATooltip: Tooltip,
  },
})
export default class AppZC extends Vue {
  jumpList(dataList) {
    this.$router.push({ name: "appListZC", query: { dataList: dataList } });
  }
}
</script>

<style lang="less" scoped>
.panel {
  width: 100vw;
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  padding: 5px;
  background-color: #f7f7fa;

  .panel-vSpace {
    width: 10px;
    height: calc(50vw - 10px);
    background-color: #EEE;
  }

  .panel-hSpace {
    width: 100%;
    height: 10px;
    background-color: #EEE;
  }

  .panel-item {
    width: calc(50vw - 10px);
    height: calc(50vw - 10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;

    .panel-item-icon {
      font-size: 100px;
      color: #69f;
    }

    .panel-item-name {
      padding: 10px;
      font-size: 16px;
    }
  }
}
</style>